<template>
    <el-dialog :title="title" :visible="editData.editVisable" @close="close()">
        <el-form :model="editData.editRow" :rules="rules" ref="edit" label-width="120px" class="edit-from">
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="editData.editRow.phone" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="editData.editRow.pwd" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="editData.editRow.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-input v-model="editData.editRow.image" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="edit-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { mapGetters } from 'vuex';
    import editMixin from "@/mixins/editMixin";

    export default {
        mixins: [editMixin],

        data() {
            return {
                pageName: 'user',
                editList: ['phone', 'pwd', 'name', 'image'],
                rules: {
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ]
                }
            };
        },

        computed: {
            ...mapGetters({
                editData: `user/editData`
            }),
            title: function () {
                return this.editData.editType == 'add' ? '新增' : '修改'
            }
        },

        methods: {

        }
    };
</script>